<template>
    <div>
        <m-filter placeholder="请输入用户名称" search-key="" @search="contentSearch">
            <a-button class="ml20" icon="plus" type="primary" @click="openModal()" v-has="'add'"></a-button>
            <template slot="search-form">
                <a-form-model layout="inline" class="index-search-form-model">
                    <a-form-model-item>
                        <a-input
                            placeholder="搜索用户名称"
                            @change="searchTable"
                            v-model="searchParams.userName"
                            allowClear
                        />
                    </a-form-model-item>
                    <!--                    <a-form-model-item>-->
                    <!--                        <a-select-->
                    <!--                            placeholder="选择角色"-->
                    <!--                            v-model="searchParams.roleId"-->
                    <!--                            allowClear-->
                    <!--                            @change="searchTable"-->
                    <!--                            showSearch-->
                    <!--                            optionFilterProp="title"-->
                    <!--                        >-->
                    <!--                            <a-select-option-->
                    <!--                                v-for="(item, index) in roleList"-->
                    <!--                                :key="index"-->
                    <!--                                :value="item.id"-->
                    <!--                                :title="item.roleName"-->
                    <!--                            >-->
                    <!--                                {{ item.roleName }}-->
                    <!--                            </a-select-option>-->
                    <!--                        </a-select>-->
                    <!--                    </a-form-model-item>-->
                    <a-form-model-item>
                        <a-button class="ml20" icon="redo" type="primary" @click="reset">重置</a-button>
                    </a-form-model-item>
                </a-form-model>
            </template>
        </m-filter>
        <div class="table">
            <a-table
                rowKey="id"
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :scroll="{ y: true }"
                @change="handleTableChange"
            >
                <template slot="operate" slot-scope="text, record">
                    <span class="primary-color" @click="openModal(record)" v-has="'edit'"></span>
                    <a-divider type="vertical" v-has="'edit:line'" />
                    <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="del(record.id)">
                        <span class="danger-color" v-has="'del'"></span>
                    </a-popconfirm>
                    <a-divider type="vertical" v-has="'del:line'" />
                    <a-popconfirm
                        title="确定要重置密码吗?"
                        @confirm="resetPassword(record)"
                        okText="是"
                        :disabled="record.isResetPassword"
                        cancelText="否"
                    >
                        <a-switch
                            :disabled="record.isResetPassword"
                            :checked="record.isResetPassword"
                            :loading="!!record.loading"
                            checked-children=""
                            un-checked-children="重置密码"
                            v-has-access="'resetPassword'"
                        />
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <modal
            v-if="isShowModal"
            :currRow="currRow"
            :isShowModal.sync="isShowModal"
            :roleList="roleList"
            :treeSelectedAreaId="currSelectedTreeNode[0]"
            @updateData="getTableData"
        />
    </div>
</template>

<script>
import modal from './modal'
import { PAGINATION } from '../../../common/config'
import { getFinalPageNum, getItemById } from '@/utils/methods'
import { usersApi, rolesApi } from '../../../common/api/setting'
import { areaMixin } from '../../../common/mixin'
import { constant } from '@/common/config'
const { ENTERPRISE } = constant
const searchParams = {
    roleId: undefined,
    userName: '',
}
export default {
    name: 'userManage',
    mixins: [areaMixin],
    components: {
        modal,
    },
    data() {
        return {
            getItemById,
            // modal
            isShowModal: false,
            currSelectedTreeNode: [],
            // search
            roleList: [],
            searchParams: { ...searchParams },
            // table
            currRow: undefined,
            pagination: PAGINATION(),
            tableData: [],
            columns: [
                {
                    title: '用户名',
                    dataIndex: 'userName',
                },
                {
                    title: '姓名',
                    dataIndex: 'realName',
                },
                {
                    title: '联系电话',
                    dataIndex: 'mobile',
                },
                // {
                //     title: '所属区域',
                //     dataIndex: 'areaId',
                // },
                {
                    title: '角色名称',
                    dataIndex: 'roleId',
                    customRender: text => {
                        return (this.roleList.find(({ id }) => id === text) || {}).roleName
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    scopedSlots: { customRender: 'operate' },
                    width: 250,
                },
            ],
            tableLoading: false,
        }
    },
    watch: {},
    mounted() {
        this.getRoleList()
    },
    methods: {
        resetPassword(record) {
            record.loading = true
            this.tableData = [...this.tableData]
            this.$apiReq
                .resetPassword({ id: record.id })
                .then(password => {
                    this.$message.success(`密码已重置为${password}`, 10)
                    record.isResetPassword = true
                })
                .catch(() => {
                    this.$message.error('密码重置失败')
                })
                .finally(() => {
                    record.loading = false
                    delete record.loading
                    this.tableData = [...this.tableData]
                })
        },
        getRoleList() {
            rolesApi.get({ type: '01' }).then(res => {
                if (res.code == 200) {
                    this.roleList = res.data.list
                }
            })
        },
        selectTreeItem(currSelectedTreeNode) {
            this.pagination.current = 1
            //当前树Item的ID
            this.currSelectedTreeNode = currSelectedTreeNode
            this.getTableData()
        },
        handleTableChange(pagination) {
            this.pagination.current = pagination.current
            this.pagination.pageSize = pagination.pageSize
            this.getTableData()
        },
        openModal(record) {
            this.currRow = record
            this.isShowModal = true
        },
        del(id) {
            usersApi.del({ id }).then(() => {
                this.$message.success('删除成功')
                this.pagination.current = getFinalPageNum(
                    this.pagination.total,
                    this.pagination.current,
                    this.pagination.pageSize,
                    1,
                )
                this.getTableData()
            })
        },
        reset() {
            this.searchParams = { ...searchParams }
            this.searchTable()
        },
        contentSearch(value) {
            Object.assign(this.searchParams, value)
            this.searchTable()
        },
        searchTable() {
            clearTimeout(this._inputSearchTimer)
            this._inputSearchTimer = setTimeout(() => {
                this.pagination.current = 1
                this.getTableData()
            }, 600)
        },
        getTableData() {
            const { current: pageNum, pageSize } = this.pagination
            const { userName, roleId } = this.searchParams
            console.log(this.searchParams)
            this.tableLoading = true
            usersApi.get({ areaId: this.currSelectedTreeNode[0], pageSize, pageNum, userName, roleId }).then(res => {
                if (res.code == 200) {
                    res = res.data
                    this.tableData = res.list
                    this.tableLoading = false
                    this.pagination.total = res.rowCount
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.index-search-form-model .ant-form-item {
    margin-bottom: 0 !important;
}
</style>
